<template>
  <div @click="fromDetail" class="articles">
<!--    标题-->
    <div class="title1">
      <label>
        {{item.articleTitle}}
      </label>
    </div>
    <div class="content">
      <div class="img1">
        <img :src="item.articleThImg||imgthsrc" alt="暂无封面"/>
      </div>
<!--      摘要-->
      <div class="contenttext">
        <label>
          {{item.articleSummary||"暂无摘要"}}
        </label>
      </div>
    </div>
    <div class="data1">
<!--      标签-->
      <label>
      <svg t="1669181166053" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="2711" width="16" height="16">
        <path
            d="M995.126867 592.38l-360.08 360.08a53.333333 53.333333 0 0 1-71.333334 3.68l356.22-356.22a64 64 0 0 0 0-90.506667L495.8402 85.333333h45.573333a52.986667 52.986667 0 0 1 37.713334 15.62l416 416a53.4 53.4 0 0 1 0 75.426667z m-128 0l-360.08 360.08a53.333333 53.333333 0 0 1-75.426667 0l-416-416A52.986667 52.986667 0 0 1 0.0002 498.746667V138.666667a53.393333 53.393333 0 0 1 53.333333-53.333334h360.08a52.986667 52.986667 0 0 1 37.713334 15.62l416 416a53.4 53.4 0 0 1 0 75.426667zM341.333533 341.333333a85.333333 85.333333 0 1 0-85.333333 85.333334 85.426667 85.426667 0 0 0 85.333333-85.333334z"
            fill="#1296db" p-id="2712"></path>
      </svg>
      <a style=" color: #0c2a70;" v-for="(its) in item.category" :key="its.categoryId" href="#">{{its.categoryName}}</a>
<!--      <el-tag effect="plain" type="success" v-for="(its) in item.category" :key="its.categoryId" href="#">{{its.categoryName}}</el-tag>-->
      </label>
<!--      创造时间-->
      <label >
      <svg t="1669181764267" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="3919" width="16" height="16">
        <path
            d="M352 128h32v128h-32zM640 576h128v32H640zM416 192h192v32H416zM640 128h32v128h-32zM448 448h128v32H448zM640 448h128v32H640zM448 576h128v32H448zM256 576h128v32H256z"
            p-id="3920" fill="#1296db"></path>
        <path
            d="M864 192H704v32h160v64H160v-64h160v-32H160c-17.6 0-32 14.4-32 32v640c0 17.6 14.4 32 32 32h704c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32z m0 672H160V320h704v544z"
            p-id="3921" fill="#1296db"></path>
        <path d="M256 704h128v32H256zM256 448h128v32H256zM448 704h128v32H448z" p-id="3922" fill="#1296db"></path>
      </svg>
        {{ timeFormate(item.articleCreateTime)}}</label>
<!--      浏览量-->
      <label>
        <svg t="1669181802209" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="4348" width="16" height="16">
          <path
              d="M754.133333 242.773333c-10.88-10.88-26.666667-14.933333-41.386666-10.88-14.72 4.053333-26.24 15.786667-30.08 30.506667-2.986667 11.306667-21.333333 69.973333-40.32 130.133333-48.64-69.333333-119.04-181.12-138.026667-271.146666-1.28-8.533333-5.333333-16.853333-12.16-23.466667a42.666667 42.666667 0 0 0-60.16 0.213333l-0.426667 0.426667c-88.96 90.666667-161.28 261.12-155.093333 395.306667-19.2-24.96-33.28-49.066667-36.906667-67.84-3.626667-18.346667-18.56-32.213333-37.12-34.346667-18.56-2.133333-36.266667 8.106667-43.733333 25.173333-30.08 67.626667-42.666667 142.506667-36.053333 218.24 17.28 134.826667 117.546667 244.906667 261.333333 287.146667 37.12 11.093333 75.52 16.853333 114.346667 17.066667 147.413333 0 325.973333-85.76 382.293333-249.813334 71.68-208-48.426667-369.28-126.506667-446.72z m46.293334 418.346667C757.546667 785.92 612.906667 853.333333 498.986667 853.333333c-30.506667-0.213333-61.013333-4.693333-90.453334-13.44-87.04-25.386667-185.6-95.573333-200.746666-214.186666-2.346667-26.453333-1.493333-53.333333 2.133333-79.573334 49.066667 64.426667 114.346667 120.106667 125.013333 128.853334 14.72 12.373333 36.053333 13.226667 51.84 2.346666 15.786667-11.093333 22.186667-31.146667 15.786667-49.28l-30.933333-86.613333c-28.373333-79.146667 7.466667-221.653333 74.24-323.84 56.96 141.653333 173.226667 286.933333 178.986666 294.186667 9.813333 12.16 25.6 18.133333 40.96 15.146666 15.36-2.773333 27.946667-14.08 32.853334-29.013333 3.84-11.946667 26.026667-81.493333 43.946666-138.666667 53.12 71.04 100.693333 177.066667 57.813334 301.866667z"
              p-id="4349" fill="#d81e06"></path>
        </svg>
        {{item.articleViewCount}}
      </label>
<!--      评论-->
      <label>
        <svg t="1669181836128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5506" width="16" height="16">
          <path
              d="M711.4 925c-0.7 0-1.4 0-2.1-0.1-11.8-0.8-21.7-8.7-25.1-20l-62.9-208.8H110.6c-33.8 0-61.3-27.5-61.3-61.3V143.4c0-33.8 27.5-61.3 61.3-61.3H899c33.8 0 61.3 27.5 61.3 61.3v491.4c0 33.8-27.5 61.3-61.3 61.3h-63.8L737 908.6c-4.7 10.1-14.6 16.4-25.6 16.4zM110.6 114.4c-16 0-29 13-29 29v491.4c0 16 13 29 29 29h522.7c7.1 0 13.4 4.7 15.5 11.5l63.3 210.1 98.2-212.2c2.7-5.7 8.4-9.4 14.7-9.4h74c16 0 29-13 29-29V143.4c0-16-13-29-29-29H110.6z"
              fill="#E86262" p-id="5507"></path>
          <path
              d="M504.9 460.1c-5.8 0-11.7-0.7-17.4-2.2-18.4-4.6-33.9-16.1-43.7-32.4-9.8-16.3-12.6-35.4-7.9-53.8 4.6-18.4 16.1-33.9 32.4-43.7 16.3-9.7 35.4-12.5 53.8-7.9s33.9 16.1 43.7 32.4c9.8 16.3 12.6 35.4 7.9 53.8-4.6 18.4-16.1 33.9-32.4 43.6-11.2 6.8-23.7 10.2-36.4 10.2z m-0.2-109.8c-6.9 0-13.7 1.9-19.8 5.5-8.9 5.3-15.2 13.8-17.7 23.8s-1 20.4 4.3 29.3c5.3 8.9 13.8 15.2 23.8 17.7 10.1 2.6 20.4 1 29.3-4.3 8.9-5.3 15.2-13.8 17.7-23.8s1-20.4-4.3-29.3c-5.3-8.9-13.8-15.2-23.8-17.7-3.1-0.8-6.3-1.2-9.5-1.2z m-53.1 25.4h0.2-0.2zM262.5 460.1c-5.8 0-11.7-0.7-17.4-2.2-18.4-4.6-33.9-16.1-43.7-32.4-9.8-16.3-12.6-35.4-7.9-53.8 4.6-18.4 16.1-33.9 32.4-43.7 16.3-9.7 35.4-12.5 53.8-7.9s33.9 16.1 43.7 32.4c9.8 16.3 12.6 35.4 7.9 53.8-4.6 18.4-16.1 33.9-32.4 43.6-11.2 6.8-23.7 10.2-36.4 10.2z m-0.2-109.8c-6.9 0-13.7 1.9-19.8 5.5-8.9 5.3-15.2 13.8-17.7 23.8s-1 20.4 4.3 29.3c5.3 8.9 13.8 15.2 23.8 17.7 10.1 2.6 20.4 1 29.3-4.3 8.9-5.3 15.2-13.8 17.7-23.8s1-20.4-4.3-29.3c-5.3-8.9-13.8-15.2-23.8-17.7-3.1-0.8-6.3-1.2-9.5-1.2z m-53.1 25.4h0.2-0.2zM747.1 460.1c-15 0-30.1-4.7-42.9-14.5-31.2-23.7-37.3-68.4-13.6-99.6 23.7-31.2 68.4-37.2 99.5-13.5 31.2 23.7 37.3 68.4 13.6 99.5-13.9 18.4-35.1 28.1-56.6 28.1z m-30.7-94.5c-12.9 17-9.6 41.3 7.4 54.3s41.3 9.6 54.3-7.4c12.9-17 9.6-41.3-7.4-54.3-17-12.8-41.4-9.6-54.3 7.4z"
              fill="#E86262" p-id="5508"></path>
        </svg>
        {{item.articleCommentCount}}</label>
<!--      点赞-->
      <label>
        <svg t="1669538243011" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="2774" width="16" height="16">
          <path
              d="M906.408999 322.196472c-101.966327 0.643013-203.920011 1.295057-305.886339 1.939876 14.357613-50.554187 21.634859-95.47298 21.634858-135.021891 0-89.729212-78.61737-177.594409-157.128172-166.193572-69.230464 10.051594-76.818378 69.884314-76.818379 144.847708v67.689761c0 86.877197-72.925982 160.899552-157.471353 169.041975l-11.111843-0.095729v596.676322h602.570006c56.37201 0 104.784025-40.085358 115.28356-95.47298 28.07402-148.082641 56.137202-296.177926 84.211222-444.262374 12.04385-63.669124-29.798956-125.046159-93.457243-137.100847a116.257111 116.257111 0 0 0-21.826317-2.048249zM0.333247 479.870122v444.275017c0 42.507494 34.426482 76.935782 76.935782 76.935783h69.262976V403.665857c-23.090669-0.236614-46.172307-0.48226-69.262976-0.727905C34.78321 402.936146 0.333247 437.384302 0.333247 479.870122z"
              fill="#E86262" p-id="2775"></path>
        </svg>
<!--        <svg t="1669181836128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
<!--             p-id="5506" width="16" height="16">-->
<!--          <path-->
<!--              d="M711.4 925c-0.7 0-1.4 0-2.1-0.1-11.8-0.8-21.7-8.7-25.1-20l-62.9-208.8H110.6c-33.8 0-61.3-27.5-61.3-61.3V143.4c0-33.8 27.5-61.3 61.3-61.3H899c33.8 0 61.3 27.5 61.3 61.3v491.4c0 33.8-27.5 61.3-61.3 61.3h-63.8L737 908.6c-4.7 10.1-14.6 16.4-25.6 16.4zM110.6 114.4c-16 0-29 13-29 29v491.4c0 16 13 29 29 29h522.7c7.1 0 13.4 4.7 15.5 11.5l63.3 210.1 98.2-212.2c2.7-5.7 8.4-9.4 14.7-9.4h74c16 0 29-13 29-29V143.4c0-16-13-29-29-29H110.6z"-->
<!--              fill="#E86262" p-id="5507"></path>-->
<!--          <path-->
<!--              d="M504.9 460.1c-5.8 0-11.7-0.7-17.4-2.2-18.4-4.6-33.9-16.1-43.7-32.4-9.8-16.3-12.6-35.4-7.9-53.8 4.6-18.4 16.1-33.9 32.4-43.7 16.3-9.7 35.4-12.5 53.8-7.9s33.9 16.1 43.7 32.4c9.8 16.3 12.6 35.4 7.9 53.8-4.6 18.4-16.1 33.9-32.4 43.6-11.2 6.8-23.7 10.2-36.4 10.2z m-0.2-109.8c-6.9 0-13.7 1.9-19.8 5.5-8.9 5.3-15.2 13.8-17.7 23.8s-1 20.4 4.3 29.3c5.3 8.9 13.8 15.2 23.8 17.7 10.1 2.6 20.4 1 29.3-4.3 8.9-5.3 15.2-13.8 17.7-23.8s1-20.4-4.3-29.3c-5.3-8.9-13.8-15.2-23.8-17.7-3.1-0.8-6.3-1.2-9.5-1.2z m-53.1 25.4h0.2-0.2zM262.5 460.1c-5.8 0-11.7-0.7-17.4-2.2-18.4-4.6-33.9-16.1-43.7-32.4-9.8-16.3-12.6-35.4-7.9-53.8 4.6-18.4 16.1-33.9 32.4-43.7 16.3-9.7 35.4-12.5 53.8-7.9s33.9 16.1 43.7 32.4c9.8 16.3 12.6 35.4 7.9 53.8-4.6 18.4-16.1 33.9-32.4 43.6-11.2 6.8-23.7 10.2-36.4 10.2z m-0.2-109.8c-6.9 0-13.7 1.9-19.8 5.5-8.9 5.3-15.2 13.8-17.7 23.8s-1 20.4 4.3 29.3c5.3 8.9 13.8 15.2 23.8 17.7 10.1 2.6 20.4 1 29.3-4.3 8.9-5.3 15.2-13.8 17.7-23.8s1-20.4-4.3-29.3c-5.3-8.9-13.8-15.2-23.8-17.7-3.1-0.8-6.3-1.2-9.5-1.2z m-53.1 25.4h0.2-0.2zM747.1 460.1c-15 0-30.1-4.7-42.9-14.5-31.2-23.7-37.3-68.4-13.6-99.6 23.7-31.2 68.4-37.2 99.5-13.5 31.2 23.7 37.3 68.4 13.6 99.5-13.9 18.4-35.1 28.1-56.6 28.1z m-30.7-94.5c-12.9 17-9.6 41.3 7.4 54.3s41.3 9.6 54.3-7.4c12.9-17 9.6-41.3-7.4-54.3-17-12.8-41.4-9.6-54.3 7.4z"-->
<!--              fill="#E86262" p-id="5508"></path>-->
<!--        </svg>-->
        {{item.articleDianzanCount}}</label>
    </div>
  </div>
</template>
<script>

export default {
  name: "OurArticleCard",
  props:["item"],
  data(){
    return{
      imgthsrc:"https://is3-ssl.mzstatic.com/image/thumb/Purple128/v4/bd/0f/17/bd0f1731-eab9-978b-45ae-c46978dba494/AppIcon-0-1x_U007emarketing-0-0-85-220-6.png/1024x1024bb.jpeg"
    }
  },
  methods:{
    fromDetail()
    {
      JSON.stringify()
      let that=this;
      //反爬使用md5title:md5(that.item.articleTitle)
      this.$router.push({ name:"details",params:{title:that.item.articleTitle}})
      },
    timeFormate(str){
      if(str!=null)
        return str.split("T")[0]
      else
        return str
    },
  }
}
</script>

<style scoped>
.title1 {
  font-size: 1.3rem;
  background-image: linear-gradient(314deg, #e0c3fc 90%, #8ec5fc 90%);
  width: 100%;
  height: 8vh;
}

.title1 > label {
  margin: 5px 2px 2px 28px;
  display: flex;
  justify-content: center;
  font-size: 19px;
  font-family: inherit;
}

.articles {
  margin: 26px auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(316deg, #30cfd0 10%, #fecfef 10%);
  /*回去都会延时*/
  transition: all 0.8s;
}
.articles:hover{
  cursor:pointer;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /*animation: xx 0.8s forwards;*/
  text-align: center;
}
.content {
  display: flex;
  flex-direction: row;
}

.img1 {
  display: flex;
  margin: 10px;
}

.img1 > img {
  width: 100px;
  height: 100px;
}

.contenttext {
  margin: 23px 10px 23px 10px;
  font-size: 0.9rem;
}

.data1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.data1 > label {
  margin: 2px 7px 2px 7px;
}

.data1 svg {
  vertical-align: bottom;
}

.data1 label{
  font-size: 10px;

}
label a{
  text-decoration: none;
  margin: 0 5px 0 5px;
}
</style>
